import React from 'react';
import { connect } from 'react-redux';
import { Image, View, Text, ScrollView } from '@tarojs/components';
import pClose from '@/images/component/moduleCoupon/close.png';
import './index.scss';

const ModelCoupon = ({ dispatch, directionalCouponList }) => {
  const closeModule = () => {
    dispatch({ type: 'giftCard/resetDirectionalCoupon' });
  };

  const recieveCoupon = (taskId) => {
    dispatch({
      type: 'giftCard/receiveDirectionalCoupon',
      payload: {
        taskId,
      },
    });
    closeModule();
  };

  const handleCouponModel = () => {
    if (directionalCouponList?.mode == 2) {
      closeModule();
    } else if (directionalCouponList?.mode == 3) {
      directionalCouponList?.taskId && recieveCoupon(directionalCouponList?.taskId);
    }
  };

  const couponListDom = (
    <>
      {directionalCouponList?.relations?.length > 0 &&
        directionalCouponList.relations.map((item) => {
          let arr = [];
          if (item.type == 1 || item.type == 2) {
            arr = item.discountAmount.toString().split('.');
          }
          return (
            <View className="coupon flex-row">
              <View className="left flex-row-center-center">
                {item.type == 1 || item.type == 2 ? (
                  <View className="flex-row--baseLine">
                    <Text className="unit">¥</Text>
                    <Text className="num">{arr[0]}</Text>
                    <Text className="littlenum">{arr.length > 1 ? '.' + arr[1] : ''}</Text>
                  </View>
                ) : (
                  <View className="flex-row--baseLine">
                    <Text className="num">{item.discountAmount}</Text>
                    <Text className="unit">折</Text>
                  </View>
                )}
              </View>
              <View className="right flex-column-spaceBetween">
                <View>
                  <View className="name txt24 bold txtDot">
                    {(item.type == 1 || item.type == 2 ? '商城' : '外卖') + item.productTypeName}
                  </View>
                  <View className="condition">
                    {item.minAmount > 0 ? '满' + item.minAmount + '元可用' : '无门槛'}
                  </View>
                </View>
                <View className="date txtDot">{item.timeString}</View>
              </View>
            </View>
          );
        })}
    </>
  );

  return (
    <>
      {directionalCouponList?.relations?.length > 0 && (
        <View className="moduleCoupon flex-row-center-center" catchMove>
          <View className="mask"></View>
          <View className="content">
            <View className="cntbox">
              <View className="head">
                <View className="title flex-row-center">
                  {directionalCouponList?.mode == 2
                    ? '您的专属优惠券已到账'
                    : directionalCouponList?.mode == 3
                    ? '您有专属优惠券可领取'
                    : ''}
                </View>
              </View>
              {directionalCouponList.relations.length > 3 ? (
                <ScrollView className="list listScroll flex-column--center" scrollY>
                  {couponListDom}
                </ScrollView>
              ) : (
                <View className="list listView flex-column--center">{couponListDom}</View>
              )}
              <View className="bottom flex-row-center-center">
                <View className="btn flex-row-center-center" onClick={handleCouponModel}>
                  {directionalCouponList?.mode == 2 ? '我知道了' : '一键领取'}
                </View>
              </View>
            </View>
            <View className="close flex-row-center">
              <Image className="imgC" src={pClose} onClick={closeModule} />
            </View>
          </View>
        </View>
      )}
    </>
  );
};

export default connect(({ giftCard, loading }) => ({
  loading,
  directionalCouponList: giftCard.directionalCouponList,
}))(ModelCoupon);
